<template>
  <div>
    <bread class="describe">
      <h1>历史材料(10)</h1>
    </bread>
    <pageContent>
      <el-table
      header-row-class-name="custom-table-header-gray"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="文件名"
        width="300">
        <template slot-scope="scope"> <i class="iconfont "></i>{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="180">
        <template slot-scope="scope">
          <div>
            <i class="iconfont el-icon-success"></i> 已完成
          </div>
          <div>
            <i class="iconfont el-icon-error"></i> 生成出错
          </div>
          <div>
            <i class="iconfont el-icon-warning"></i> 已取消
          </div>
          <div>
            <el-progress :percentage="70"></el-progress>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="生成时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <div class="operation">
            <el-popover
              placement="top"
              width="160"
              trigger="hover"
              v-model="visible2">
              <p>是否取消生成材料？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
              </div>
              <el-button
                slot="reference"
                class="cancel"
                type="text">
                取消生成
              </el-button>
            </el-popover>
            <a href="javascript:;">下载</a>
            <a href="javascript:;">分享</a>
            <a href="javascript:;">重试</a>
            <el-popover
              placement="top"
              width="160"
              trigger="hover"
              v-model="visible2">
              <p>是否取消生成材料？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
              </div>
              <el-button
                slot="reference"
                class="delete"
                type="text">
                删除
              </el-button>
            </el-popover>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">编辑</el-dropdown-item>
                <el-dropdown-item command="2">重命名</el-dropdown-item>
                <el-dropdown-item command="3">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="重命名历史材料" width="390px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <div>请输入新的材料名称</div>
        <el-form-item label="">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    </pageContent>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      dialogFormVisible: false,
      activeName: 'second',
      visible2: false,
      form: {
        name: '材料2018-01-15'
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '2017-06-12 18:24'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '2017-06-12 18:24'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '2017-06-12 18:24'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCommand(e) {
      console.log(e);

      switch(e)
      {
      case 1:

        break;
      case '2':
        this.dialogFormVisible = true;
        break;
      case 3:

        break;
      }
    },
    toAnnouncements() {
      this.$router.push('/index/research-tools/announcements')
    },
    toArticle() {
      this.$router.push('/index/research-tools/article')
    },
    deleteNotice() {

    }
  },
  components: {
  }
};
</script>
<style scoped lang="scss">
  @import './index.scss';
</style>
